Implementing the Salesforce SFRA Plugin

Setup

Download LINK_altapay repository from Demandware LINK marketplace.

Importing the Plugin

  1. Import the int_altapay _sfra plugin into the SFCC Studio Workspace.
  2. Open UX Studio.
  3. Click File -> Import -> General -> Existing Projects into Workspace.
  4. Browse to the directory where you saved the plugin.
  5. Click “Finish”.
  6. Click “OK” when prompted to link the plugin to the sandbox.
  7. Log into the SFCC Business Manager on your sandbox or PIG Instance.
  8. Navigate to: Administration -> Manage Sites -> your site -> settings tab.
    Add "int_altapay_sfra" plugin in the cartridge path and click the “Apply” button.



Importing the Metadata

From the SFCC Business Manager:

  1. Navigate to: Administration -> Site Development -> Import & Export.
  2. In the “Import & Export Files” section, click the “Upload” link or button.
  3. Upload the file “altapay_sfra_metadata.xml” from the LINK_altapay repository and navigate back.
  4. In the “Meta Data” section, click the “Import” link or button.

  5. Select “altapay_sfra_metadata.xml” and click the “Next” button.
  6. Wait for validation to complete, and click the “Import” button.

Importing the Web Service

AltaPay integration uses the web service framework to create web service calls to AltaPay, so you need to import it into the Sandbox.

From the SFCC Business Manager:

  1. Navigate to: Administration -> Operations -> Import & Export
  2. In the “Import & Export Files” section, click the “Upload” link or button.
  3. Upload the file “altapay_sfra_webservice.xml” from the LINK_altapay repository.
  4. In the “Services” section, click the “Import” button.
  5. Select “altapay_sfra_webservice.xml” and click the “Next” button.
  6. Wait for validation and click the “Next” button.
  7. Leave “Merge” selected as the import mode and click the “Import” button.

Creating AltaPay Payment Processor

From the SFCC Business Manager:

  1. Select your site from the list in the top navigation bar.
  2. Navigate to: Merchant Tools -> Ordering -> Payment Processors.
  3. Click the “New” button.
  4. For the ID, enter altapay in all capital letters.
  5. For the Description, enter “AltaPay Checkout”.
  6. Click the “Apply” button.

Importing the Payment Methods

From the SFCC Business Manager:

  1. Select your site from the list in the top navigation bar.
  2. Navigate to: Merchant Tools -> Ordering -> Import & Export
  3. In the “Import & Export Files” section, click the “Upload” link or button.
  4. Upload the file “altapay_sfra_paymentmethods.xml” from the LINK_altapay repository.
  5. In the “Payment Methods” section, click the “Import” button.


  6. Select “altapay_sfra_paymentmethods.xml” and click the “Next” button.
  7. Wait for validation and click the “Next” button.
  8. Leave “Merge” selected as the import mode and click the “Import” button.
  9. Navigate to: Merchant Tools -> Ordering -> Payment Methods.
  10. In the “Payment Methods” section, ensure that all AltaPay payment methods are disabled so they do not appear as an option in the normal Storefront check-out flow.
  11. Enable the desired payment methods but be aware that some of them is limited to certain countries and currencies.
  12. Remember to disable all the normal storefront payment methods.

Configuring AltaPay Site Preferences

From the SFCC Business Manager:

  1. Select your site from the list in the top navigation bar.
  2. Navigate to: Merchant Tools -> Site Preferences -> Custom Preferences -> AltaPay:
  3. This is where the merchant can access and configure the AltaPay integration.
  4. Fill out the settings as desired. Descriptions of the site preferences are listed in the table below.
Preference Description
AltaPay Cartridge Enabled

Preference that defines if the AltaPay integration is enabled.
AltaPay Test Mode

Preference that defines if the testing mode should be enabled.
AltaPay base Production URL

URL to the production gateway. E.g. https://yourname.altapaysecure.com/
AltaPay base Test URL

URL to the test gateway. E.g. https://testgateway.pensio.com/
AltaPay Production Username

Username for the production gateway and terminals.
AltaPay Production Password

Password for the production gateway and terminals.
AltaPay Test Username

Username for the test gateway and terminals.
AltaPay Test Password

Password for the test gateway and terminals.
AltaPay Timeout Timeout (seconds) for communication with AltaPay backend.
Do not change this without consulting AltaPay.

AltaPay Terminals

 

Mapping of payment methods in Salesforce and terminals in the AltaPay payment gateway.
A terminal can only contain one payment method and one currency, but it is possible to add all the relevant terminals.
The setting must be structured as shown in the screen illustration.

The attribute ‘id’ must correspond with the payment method added in: Merchant Tools -> Ordering ->Payment Methods plus the preferred currency. The attribute ‘name’ is the name and identifier of the AltaPay terminal. The attribute ‘allowedlocales’ defines which locales that can use the terminal.
AltaPay Payment Page URL URL for controlling the payment form page which is shown to the customer.

It is possible to customize the payment page by changing the callbackform.isml template.

AltaPay Payment Success URL When a payment is accepted, this callback URL is called, and the data received from AltaPay is validated.
AltaPay Payment Fail URL In case a payment fails this callback is called. This can be due to incorrect card details, declined by the bank etc.  The data received from AltaPay is stored on the order and the customer is redirected back to checkout page.
AltaPay Payment Open URL To support an asynchronous payment (e.g. wallet payments) where the provider not always accept the payment upfront this callback is called. To indicate this event an open payment contains the confirmation status ‘Not confirmed’.
AltaPay Payment Notification URL In case a payment has not returned an answer (e.g. customer closes window prior to returning to the shop), or when an open payment is accepted/declined. When an answer arrives, this callback is called. This does not apply to card payments.
AltaPay Redirect Page URL This URL is used when the customer is redirected to a third party (e.g. 3D Secure) to inform the customer about the redirection. A default non-branded page is shown if nothing else is stated.
AltaPay Whitelisted IPs List of IP addresses that AltaPay is communicating from. Used to secure that only request from AltaPay is handled.

You are advised to verify that the following IP addresses are added:

  • 185.206.120.0/24(ipv6: 2a10:a200::/29)
AltaPay Error Notifications Enabled Preference that defines if notification emails should be send when error events occurs in the payment flow.
AltaPay Notification Sender Email used as sender on notification emails, default is ‘noreply@dsalesforce.com’
AltaPay Notification Recipients List of notification recipients

Selecting the language

As part of the setup, the language selection for the check-out process is also on the check list. Navigate to: Merchant Tools -> Site Preferences -> Locales -> select the web shops local language.

AltaPay supports the following languages:

Code Language

CS

Czech

DA

Danish

DE

German

EN

English

ES

Spanish

FI

Finnish

FR

French

JA

Japanese

LT

Lithuanian

NL

Dutch

NO

Norwegian

NB*

Norwegian (Bokmål) – converted to no

NN

Norwegian (Nynorsk) – converted to no

PL

Polish

SV

Swedish

TH

Thai

TR

Turkish

ZH

Chinese

EE*

Estonian – converted to ET

ET

Estonian

IT

Italian

PT

Portuguese

RU

Russian

If you (the merchant) use an unsupported language, the payment page is shown in English as default.

Custom Code

We have made some adjustments to the standard Sitegenesis, which you will need to implement to use AltaPay as the Payment Service Provider (PSP) on your storefront.

You will need to modify the following four files:

File Location
Checkout.js app_storefront_base/cartridge/Controllers/Checkout.js
checkout.isml app_storefront_base/cartridge/templates/default/checkout/checkout.isml
ALTAPAY.js app_storefront_base/hooks.json
package.json app_storefront_base/scripts/hooks/payment/processor/ALTAPAY.js

You will also need to add the following files:

File Location
hooks.js app_storefront_base/client/default/js/altapayCheckout.js
altapayCheckout.js Package.json



Enabling the AltaPay Cartridge (Checkout.js)

Add the code below to the “Checkout-Begin” controller to activate the cartridge (plugin).

  1. Navigate to: app_storefront_base -> cartridge -> Controllers -> Checkout.js
  2. Insert ‘altaPayEnabled’ property in the rendering object.
  3. Look for an example in the folder ‘Custom Code’

    altapayEnabled:
    dw.system.Site.current.getCustomPreferenceValue(‘altaPayCartridgeEnabled’)


Using the AltaPay Specific Client JS (checkout.isml)

Add the code below to use the AltaPay specific client JS when the AltaPay cartridge is enabled.

  1. Navigate to: app_storefront_base -> cartridge -> templates -> default -> checkout -> checkout.isml
  2. Insert the AltaPay cartridge enabled check in the top <isscript> tag.
  3. Look for an example in the folder ‘Custom Code’.

**

  1. Insert altapayCheckout.js file provided in the “Custom Code” folder to app_storefront_base -> cartridge -> client -> default -> js

  2. Navigate to package.json file in the root folder of your project
  3. Insert the “path” configs to package.json.
  4. Remember to compile the client JS with this command: npm run compile:js


Adding the AltaPay Processor Hook

Add the code below to add AltaPay as a processor.

  1. Navigate to: app_storefront_base/hooks.json
  2. Insert AltaPay below the basic_credit processor.


Inserting the AltaPay processor

Insert the ALTAPAY processor script provided in the ‘Custom Code’ folder to app_storefront_base -> cartridge -> scripts -> hooks -> processor

External Interfaces

The AltaPay cartridge communicates with AltaPay’s backend where customer data etc. is sent, to verify a transaction. Banks and acquirers make the verification. AltaPay relays the response to the cartridge.

Credit card tokenization

You can save the customer credit card after a successful transaction. The credit card number is saved securely inside AltaPay's payments gateway. Please contact us to enable the credit card token in your terminal.

The credit card terminal must be configured to support credit card tokens. Also, the credit card form template must be set to form_dynamic_div_with_save_cc. This setup is done inside AltaPay's payments gateway. Please contact AltaPay to set up your terminal.

If the terminal is configured correctly the customer will have the option to save the credit card information during checkout. Also, a previous saved credit card will appear with a mask in the checkout page.

Reconciliation setup

Follow the steps below to setup the reconciliation identifier.

  1. Navigate to: int_altapay_sfra/cartridge/scripts/createRequestParameters.js.
  2. Find the Reconciliation Identifier section and remove the comments.

  1. Replace “Insert the reconciliation identifier here” with the reconciliation identifier that is needed by the ERP system.